﻿<template>
  <el-dialog v-drag :title = 'dialogSelectTitle' :visible.sync = 'dialogSelectVisible' width = '55%' :before-close = "handleClose">
    <div class = 'page_tableContent'>
      <el-table :data = 'columns' style = 'width:100%; margin-bottom:20px;' stripe
      ref = "multipleTable" @selection-change = "handleSelectionChange">
        <el-table-column
          type = "selection"
          align = 'center'
          width = "55">
        </el-table-column>
        <el-table-column align = 'center' v-for = 'item in table.tableColumn' :key = 'item.indexName' :label = 'item.text'>
          <template slot-scope = 'scope'>
            <span>{{scope.row[item.indexName]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot = "footer" class="dialog-footer">
      <el-button type = 'info' @click = "handleClose">取 消</el-button>
      <el-button type = "primary" @click = 'handleSubmit'>确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['showColumnsDialog', 'columns'],
  data () {
    return {
      table: {
        tableColumn: []
      },
      dialogSelectVisible: false,
      dialogSelectTitle: '',
      multipleSelection: ''
    }
  },
  methods: {
    // 点击上部的X关闭弹窗时
    handleClose () {
      this.$emit('giveUpColumns')
      this.$refs.multipleTable.clearSelection()
    },
    handleSelectionChange (rows) {
      this.multipleSelection = rows
    },
    // 点击确定按钮时
    handleSubmit () {
      this.$emit('sureSelectColumns', this.multipleSelection)
      this.$refs.multipleTable.clearSelection()
    }
  },
  watch: {
    showColumnsDialog: {
      handler: function (val, oldVal) {
        this.dialogSelectVisible = val
        if (val) {
          // 将数据还原
          this.dialogSelectTitle = '选择需要导出的字段'
          this.multipleSelection = []
          this.table.tableColumn = [
            {
              text: '字段名称',
              indexName: 'column_name'
            },
            {
              text: '字段描述',
              indexName: 'column_desc'
            }
          ]
        }
      },
      deep: true
    }
  }
}
</script>
